<script setup>
import { ref, reactive } from "vue";
import {
  dataUserTotalCountService,
  dataShareTotalCountService,
  dataLikeTotalCountService,
} from "@/api";
import { ElMessage } from "element-plus";
import { DigitalFlop } from "@kjgl77/datav-vue3";
import {
  UserFilled,
  Comment,
  Share,
  StarFilled,
} from "@element-plus/icons-vue";
import NewUserTrendsLine from "./NewUserTrendsLine.vue";

const formatter = (number) => {
  const numbers = number.toString().split("").reverse();
  const segs = [];

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

  return segs.join(",").split("").reverse().join("");
};

const configCommon = reactive({
  content: "{nt}",
  style: {
    fontSize: 30,
  },
  animationCurve: "easeOutBounce",
  formatter,
});
// 用户总数
let countUserLoading = ref(false);
const config1 = reactive({
  ...configCommon,
  number: [0],
  style: {
    fill: "#003366",
  },
});
const getUserTotalCount = async () => {
  countUserLoading.value = true;
  try {
    let { data } = await dataUserTotalCountService();
    config1.number[0] =
      config1.number[0] + +data.userCount + Math.floor(Math.random() * 10000);
    console.log("config1.number[0]", config1.number[0]);
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  } finally {
    countUserLoading.value = false;
  }
};

// 分享总数
let countShareLoading = ref(false);
const config2 = reactive({
  ...configCommon,
  number: [0],
  style: {
    fill: "#ff6300",
  },
});
const getShareTotalCount = async () => {
  countShareLoading.value = true;
  try {
    // let { data } = await dataShareTotalCountService();
    // console.log(data);
    let data = 1000;
    config2.number[0] =
      config2.number[0] + +data + Math.floor(Math.random() * 10000);
    console.log("config2.number[0]", config2.number[0]);
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  } finally {
    countShareLoading.value = false;
  }
};

// 点赞总数
let countLikeLoading = ref(false);
const config3 = reactive({
  ...configCommon,
  number: [0],
  style: {
    fill: "#603818",
  },
});
const getLikeTotalCount = async () => {
  countLikeLoading.value = true;
  try {
    // let { data } = await dataLikeTotalCountService();
    // console.log(data);
    let data = 1000;
    config3.number[0] =
      config3.number[0] + +data + Math.floor(Math.random() * 10000);
    console.log("config3.number[0]", config3.number[0]);
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  } finally {
    countLikeLoading.value = false;
  }
};
// 评论总数
let countCommentLoading = ref(false);
const config4 = reactive({
  ...configCommon,
  number: [0],
  style: {
    fill: "#006699",
  },
});
const getCommentTotalCount = async () => {
  countCommentLoading.value = true;
  try {
    // let { data } = await dataCommentTotalCountService();
    // console.log(data);
    let data = 1000;
    config4.number[0] =
      config4.number[0] + +data + Math.floor(Math.random() * 10000);
    console.log("config4.number[0]", config4.number[0]);
  } catch (error) {
    ElMessage.error("请求失败，请稍后再试");
  } finally {
    countCommentLoading.value = false;
  }
};

const getData = async () => {
  await getUserTotalCount();
  await getShareTotalCount();
  await getLikeTotalCount();
  await getCommentTotalCount();
};
getData();
</script>
<template>
  <el-col :span="6">
    <div class="cardCount" v-loading="countUserLoading">
      <div class="data">
        <div class="text">
          <el-icon><UserFilled /></el-icon>
          用户总量
        </div>
        <DigitalFlop :config="config1" style="position: relative; top: 7%" />
      </div>
      <div class="line">
        <NewUserTrendsLine></NewUserTrendsLine>
      </div>
      <div class="bg"></div>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="cardCount" v-loading="countShareLoading">
      <div class="data">
        <div class="text" style="color: #ff6300">
          <el-icon><Share /></el-icon>
          分享总量
        </div>
        <DigitalFlop :config="config2" style="position: relative; top: 7%" />
      </div>
      <div class="line">
        <NewUserTrendsLine :colorLine="'#FF7C54'"></NewUserTrendsLine>
      </div>
      <div class="bg2"></div>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="cardCount" v-loading="countUserLoading">
      <div class="data">
        <div class="text" style="color: #603818">
          <el-icon><StarFilled /></el-icon>
          点赞总量
        </div>
        <DigitalFlop :config="config3" style="position: relative; top: 7%" />
      </div>
      <div class="line">
        <NewUserTrendsLine :colorLine="'#A56E61'"></NewUserTrendsLine>
      </div>
      <div class="bg3"></div>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="cardCount" v-loading="countUserLoading">
      <div class="data">
        <div class="text" style="color: #006699">
          <el-icon><Comment /></el-icon>
          评论总量
        </div>
        <DigitalFlop :config="config4" style="position: relative; top: 7%" />
      </div>
      <div class="line">
        <NewUserTrendsLine :colorLine="'#00ADB1'"></NewUserTrendsLine>
      </div>
      <div class="bg4"></div>
    </div>
  </el-col>
</template>
<style lang="scss" scoped>
.cardCount {
  position: relative;
  height: 100px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: 0.3s;
  &:hover {
    transform: scale(1.05) translateY(-5px); /* 缩放并轻微上移 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
}
.bg {
  height: 100px;
  border-radius: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, #e6e6fa 200px),
    /* 蓝色的淡紫罗兰透明渐变 */ linear-gradient(to left, #79c7f8 20%, #77e1ef); /* 天蓝色到淡海蓝横向渐变 */
}
.bg2 {
  height: 100px;
  border-radius: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, #f8f8ff 200px),
    /* 亮 Lavender 色透明渐变 */ linear-gradient(to right, #ffb6c1 20%, #ffec8b); /* 浅珊瑚红到浅柠檬黄横向渐变 */
}
.bg3 {
  height: 100px;
  border-radius: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, #fffacd 200px),
    /* 柠檬黄顶部透明渐变 */ linear-gradient(to right, #ffdab9 20%, #ffa07a); /* 浅杏色到浅鲑鱼红横向渐变 */
  // background: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%),
  //   /* 粉蓝到天蓝横向渐变 */
  //     linear-gradient(to bottom, transparent, #fffacd 200px);
}
.bg4 {
  height: 100px;
  border-radius: 5px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, #f0ffff 200px),
    /* 水色顶部透明渐变 */ linear-gradient(to left, #98fb98 20%, #afeeee); /* 浅绿到水绿色横向渐变 */
}
.line {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.data {
  position: absolute;
  z-index: 3;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .text {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #003366;
    // font-weight: bold;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95px;
    // font-family: "Source Han Serif";
  }
}
</style>
